{% block content %}
	<input type="hidden" id="username" value="{{ request.user.username }}">
	<div class="col-md-4 resize">
		<div id="chat-box">
            <div class="card" style="background-color: rgba(91,192,222,0.3); margin: 5px">
                <div class="card-body">
                    <div class="chat-message d-flex">
                        <p><b>Somebody: </b> once told me</p>
                    </div>
                </div>
            </div>
            <div class="card" style="background-color: rgba(91,192,222,0.3); margin: 5px">
                <div class="card-body">
                    <div class="chat-message d-flex">
                        <p><b>this_world: </b>is gonna roll me</p>
                    </div>
                </div>
            </div>
		</div>
		<div class="d-flex justify-content-between">
			<textarea type="text" id="chat-message-input" class="inline-block flex-fill"></textarea>
			<div>
				<button type="button" class="btn btn-dark inline-block" id="chat-message-submit">
					{% load static %}
					<img src="{% static 'send.svg' %}" alt="send-button">
				</button>
                <button type="button" class="btn btn-dark inline-block" id="toggle-emote-list">
					{% load static %}
					<img src="{% static 'smileys.svg' %}" alt="emotes">
				</button>
			</div>
		</div>
        <div id="chat-emote-list" style="display: block">
            <div class="d-flex flex-wrap">
                {% for emote in emotes_list %}
                <div class="chat-list-emote-container" data-name="{{emote.0}}" onclick="SmileInput('{{emote.0}}')">
                    <img class="chat-emote" src="{% static 'Pictures\emotes' %}\{{emote.0}}{{emote.1}}" alt=".~.">
                    <p>{{emote.0}}</p>
                </div>
                {% endfor %}
                <script>
                    function SmileInput(str){
                        var input = document.getElementById("chat-message-input");
                        input.value = input.value + ` ${str} `;
                    }
                </script>
            </div>
        </div>
	</div>
{% endblock %}